<template>
  <div>
    <div class="d-color d-flex-between" data-v-70989959="">
      <template v-for="(item, index) in colors" :key="index">
        <span
          class="d-color-item"
          :style="[
            curIndex === index
              ? { borderColor: item.color, backgroundColor: item.color }
              : { borderColor: 'transparent', backgroundColor: item.color },
          ]"
          @click="colorClick(index)"
        ></span>
      </template>
      <div>
        <ColorPicker></ColorPicker>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import ColorPicker from '../colorpicker/ColorPicker.vue'
import emitter from '../../../mitt'
const borderStyle = ref('transparent')

const colors = [
  { color: 'rgb(22, 129, 255)' },
  { color: 'rgb(46, 204, 113)' },
  { color: 'rgb(51, 197, 197)' },
  { color: 'rgb(155, 89, 182)' },
  { color: 'rgb(241, 196, 15)' },
  { color: 'rgb(230, 126, 34)' },
  { color: 'rgb(231, 76, 60)' },
]
const curIndex = ref(0)
defineEmits(['pickedEvent'])
const colorClick = (index: any) => {
  console.log('选择了颜色', index)

  curIndex.value = index
  // emit('pickedEvent', colors[index])
  emitter.emit('pickedEvent', colors[index].color)

  // borderStyle.value = 'rgb(22, 129, 255)'
}
</script>

<style scoped>
.d-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.d-color-item {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-clip: content-box;
  border: 2px solid;
  box-sizing: content-box;
  padding: 2px;
  transition: 0.2s;
  box-shadow: 0 0 5px #00000026;
  display: inline-block;
}
.colorTransparent {
  background: url('../../../assets/透明.png');
  background-size: cover;
}
</style>
